<template>
    <div>
        <!-- 商品列表 -->
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media mui-transitioning" v-for="item in $store.state.car" :key="item.id">
                <div class="mui-slider-right mui-disabled">
                    <a class="mui-btn mui-btn-red" style="transform: translate(0px, 0px);" @click="remove(item.id)">删除</a>
                </div>
                <mt-switch v-model="item.selected" style="z-index: 999" @change="SelectChange(item.id, item.selected)"></mt-switch>
                <a href="javascript:;" class="mui-slider-handle">
                    <img class="mui-media-object mui-pull-left" :src="'./static/images/goods4.jpg'">
                    <div class="mui-media-body">
                        <p class="title">{{item.name}}</p>
                        <p class='mui-ellipsis'>
                            <span class="price">¥<i>{{item.price}}</i>.00</span>
                            <span class="mui-numbox" data-numbox-min="1" data-numbox-max="999">
                                <button class="mui-btn mui-btn-numbox-minus" type="button" disabled="">-</button>
                                <input id="test" class="mui-input-numbox" type="number" :value="item.count" readonly>
                                <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                            </span>
                        </p>
                    </div>
                </a>
            </li>
        </ul>
        <!-- 底部结算 -->
        <footer v-if="iscreate">
            <div class="selAll">
                <mt-switch v-model="selAll"></mt-switch>
                全选
            </div>
            <div class="countPrice">
                总计：<i>¥{{$store.getters.getPriceCount.amount}}.00</i>
            </div>  
            <div class="toBuy" @click="buy">去结算<i>({{$store.getters.getPriceCount.count}}件)</i></div>
        </footer>
    </div>
</template>

<script>
import { MessageBox } from 'mint-ui';
export default {
    data() {
        return {
            selAll: true,
            iscreate: false
        }
    },
    methods: {
        remove(id) {
            MessageBox.confirm('您确定删除吗?').then(action => {
                this.$store.commit('removeGood', id)
            });
        },
        SelectChange(id, selected) {
            // console.log(id, selected);
            this.$store.commit("selectGood", {id, selected: selected}) 
        },
        buy() {
            MessageBox({
                title: '帅比作者提示您',
                message: '账户余额不足，请充值',
                showCancelButton: true
            });
        }
    },
    watch: {
        'selAll': function(newVal) {
            this.$store.state.car.some((item, i) => {
                item.selected = newVal
            })
            localStorage.setItem('car', JSON.stringify(this.$store.state.car))
        }
    },
    created() {
        this.$store.state.car.some((item, i) => {
            item.selected = this.selAll        
        })        
    },
    mounted() {
        this.iscreate = true
    }
}
</script>

<style scoped>
    /* 商品列表 */
    .mui-media {
        display: flex
    }
    .mui-pull-left {
        max-width: 75px;
        height: 75px;
    }
    .mui-ellipsis {
        display: flex;
        justify-content: space-between;
    }
    .mui-media-body {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 75px;
    }
    .title {
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-bottom: 5px;
    }
    .price {
        font-size: 14px;
        color: #E93B3D;
    }
    .price i {
        font-style: normal;
        font-size: 17px;
    }
    /* 底部结算 */
    footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 55px;
        display: flex;
        height: 50px;
        background: #fafafa;
        box-shadow: 0 0 10px 0 hsla(0,6%,70%,.6);
    }
    .selAll {
        flex: 1;
        font-size: 10px;
        color: #999;
        text-align: center;
    }
    .countPrice {
        flex: 6;
        text-align: right;
        line-height: 50px;
        font-size: 16px;
        color: #333;
        font-weight: 700;
    }
    .countPrice i {
        font-style: normal;
        color: #E93B3D;
    }
    .toBuy {
        box-sizing: border-box;
        margin-left: 10px;
        flex: 3;
        background: #e4393c;
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        text-align: center;
        line-height: 50px;
    }
    .toBuy i {
        font-style: normal;
        font-size: 12px;
        font-weight: 400;
    }
</style>
